<template>
    <div>
        <h4>汽车信息一览</h4>
        <table border="1" width="400" cellspacing="0" style="text-align">
            <thead>
                <tr><th>编号</th><th>品牌</th><th>价格</th><th>产地</th><th>操作</th></tr>
            </thead>
            <tbody>
                <tr v-for="car in cutBean.list" :key="car.id">
                    <td>{{car.id}}</td>
                    <td>{{car.type}}</td>
                    <td>{{car.price}}</td>
                    <td>{{car.address}}</td>
                    <td>
                        <a href="javascript:void(0)" @click="del(car.id)">删除</a>
                        <a href="javascript:void(0)" @click="update(car)">修改</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <a v-for="n in cutBean.pages" :key="n" style="margin-left:10px" href="javascript:void(0)" @click="pageClick(n)">{{n}}</a>
        <div>
            品牌：<input type="text" v-model="param.type"><br>
            起始价格<input type="text" v-model="param.startPrice"><br>
            结束价格：<input type="text" v-model="param.endPrice"><br>
            <input type="button" value="查询" @click="pageClick(1)">
        </div>
    </div>
</template>

<script>
export default {
    props:["cutBean"],
    data(){
        return{
            param:{pageNO:1}
        }
    },
    methods:{
        pageClick(n){
            this.param.pageNO = n;
            this.$emit("page",this.param);
        },
        async del(carId){
            var info = await this.ajax.getSubmit("/project/car/del",{id:carId});
            if(info == "ok"){
                this.$emit("page",{pageNO:1});
            }
        },
        update(car){
            this.$emit("show",car);
        }
    }
}
</script>

<style>

</style>